<template>
  <div class="container">
    <el-row class="u-row" :gutter="10">
      <el-col :span="3">
        <el-col :span="12" class="u-name">客户总数:</el-col>
        <el-col :span="12" class="u-value">100</el-col>
      </el-col>
      <el-col :span="6">
        <el-col :span="12" class="u-name">合规:</el-col>
        <el-col :span="12" class="u-value">10</el-col>
      </el-col>
    </el-row>
    <el-form
      ref="keyPersonFormDataRef"
      :label-position="labelPosition"
      label-width="100px"
    >
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="客户编码" label-width="70px">
              <el-input
                placeholder="请输入内容"
                v-model="formData.custCode"
                class="input-with-select"
              >
                <el-select
                  v-model="formData.custCodeType"
                  slot="append"
                  placeholder="请选择"
                  class="select-box"
                >
                  <el-option label="精确查询" value="1"></el-option>
                  <el-option label="模糊查询" value="2"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="客户名称" label-width="70px">
              <el-input
                placeholder="请输入内容"
                v-model="formData.custName"
                class="input-with-select"
              >
                <el-select
                  v-model="formData.custNameType"
                  slot="append"
                  placeholder="请选择"
                  class="select-box"
                >
                  <el-option label="精确查询" value="1"></el-option>
                  <el-option label="模糊查询" value="2"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple">
            <el-form-item label="是否合规">
              <el-select v-model="formData.isCompliance" placeholder="请选择">
                <el-option
                  v-for="item in ComplianceStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple">
            <el-form-item
              label="客户经理"
              prop="custManager"
              label-width="70px"
            >
              <dic-customer-select
                :value="formData.custManager"
                title="选择客户经理"
                size="70%"
                ref="custManagerRef"
                @inLoadAjax="custManagerHandel"
              >
                <!-- 表单 -->
                <el-form
                  :inline="false"
                  label-width="80px"
                  :model="custManagerForm"
                  ref="custManagerFormRef"
                >
                  <el-row :gutter="10">
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item
                          label="员工编码"
                          class="u-ipt"
                          prop="STAFF_CODE"
                        >
                          <el-input
                            placeholder="请输入内容"
                            v-model="custManagerForm.STAFF_CODE"
                            class="input-with-select"
                          >
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item
                          label="员工名称"
                          class="u-ipt"
                          prop="STAFF_NAME"
                        >
                          <el-input
                            placeholder="请输入内容"
                            v-model="custManagerForm.STAFF_NAME"
                            class="input-with-select"
                          >
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item
                          label="组织名称"
                          class="u-ipt"
                          prop="ORG_NAME"
                        >
                          <el-input
                            placeholder="请输入内容"
                            v-model="custManagerForm.ORG_NAME"
                            class="input-with-select"
                          >
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item
                          label="手机号码"
                          class="u-ipt"
                          prop="telNumber"
                        >
                          <el-input
                            placeholder="请输入内容"
                            v-model="custManagerForm.telNumber"
                            class="input-with-select"
                          >
                          </el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <el-button
                        type="primary"
                        size="small"
                        @click="queryCustManagerId"
                        >查询</el-button
                      >
                    </el-col>
                  </el-row>
                </el-form>
                <!-- 表格 -->
                <el-table
                  :data="custManagerTable"
                  border
                  :header-cell-style="{
                    background: '#F2F2F2',
                    color: '#333',
                  }"
                  @row-click="custManagerDialogRow"
                  class="commonRegionName-table"
                >
                  <el-table-column property="STAFF_CODE" label="员工编码">
                  </el-table-column>
                  <el-table-column property="STAFF_NAME" label="员工名称">
                  </el-table-column>
                  <el-table-column property="ORG_NAME" label="组织名称">
                  </el-table-column>
                  <el-table-column property="DEPARTMENT_NAME" label="部门名称">
                  </el-table-column>
                  <!-- <el-table-column property="telNumber" label="移动电话">
                    </el-table-column> -->
                </el-table>
                <el-pagination
                  background
                  @size-change="custManagerHandleSizeChange"
                  @current-change="custManagerHandleCurrentChange"
                  :current-page="querycustManagerDialog.pageIndex"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="querycustManagerDialog.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="parseInt(querycustManagerDialog.rowCount)"
                  class="m-pagination"
                >
                </el-pagination>
              </dic-customer-select>
            </el-form-item></div
        ></el-col>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="checkInfo"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-top: 15px; float: right">
      <el-col>
        <el-button type="primary" size="small" @click="exportData"
          >导出</el-button
        >
        <el-button type="primary" size="small" @click="someComplianceCheck"
          >批量认证查询</el-button
        >
        <el-button type="primary" size="small" @click="someComplianceIdent"
          >批量合规认证</el-button
        >
        <el-button type="primary" size="small" @click="exportComplianceIdent"
          >批量导入合规认证</el-button
        >
      </el-col>
    </el-row>
    <div class="clear" style="height: 10px"></div>
    <div class="m-table-box">
      <DicTable
        ref="dictable"
        stripe
        border="full"
        align="center"
        :columnData="tableColumns"
        :tableData="tableData"
        :loading="tableLoading"
        :currentPage="parseInt(tablePage.pageIndex)"
        :pageSize="parseInt(tablePage.pageSize)"
        :totalResult="parseInt(tablePage.rowCount)"
        :pager="true"
        @on-page-change="handlePageChange"
        @checked-data="checkedData"
        width="100%"
      >
        <template #custName="{ row }">
          <i
            v-if="!row.identityType || row.identityType == ''"
            class="sfz whg"
          ></i>
          <i v-else-if="row.identityType == '1'" class="sfz dsh"></i>
          <i v-else class="sfz yhg"></i>
          <span>{{ row.custName }}</span>
        </template>
        <template #opt="{ row }">
          <el-button v-if="!row.identityType" type="text" @click="complianceIdent(row)"
            >合规认证</el-button
          >
        </template>
      </DicTable>
      <ul class="exp flex">
        <li><i class="sfz yhg"></i>已合规-正式身份证</li>
        <li><i class="sfz dsh"></i>已合规-临时身份证</li>
        <li><i class="sfz whg"></i>未合规</li>
      </ul>
    </div>
    <el-dialog
      width="60%"
      title="合规性验证"
      :visible.sync="outerVisible"
      append-to-body
    >
      <el-form label-width="100px">
        <el-row :gutter="10">
          <el-col :span="8">
            <div>
              <el-form-item label="客户名称" required>
                <el-input
                  placeholder="请输入内容"
                  v-model="chooseIdentCust.custName"
                  class="input-with-select"
                  disabled
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-form-item label="证件类型" required>
                <el-select
                  v-model="chooseIdentCust.idType"
                  placeholder="请选择"
                  disabled
                >
                  <el-option
                    v-for="(item, index) in idCardType"
                    :label="item.label"
                    :value="item.value"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <el-form-item label="证件号码" required>
                <el-input
                  placeholder="请输入内容"
                  v-model="chooseIdentCust.idNum"
                  class="input-with-select"
                  disabled
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="16">
            <div>
              <el-form-item label="证件地址" required>
                <el-input
                  placeholder="请输入内容"
                  v-model="chooseIdentCust.idAddress"
                  class="input-with-select"
                  disabled
                >
                </el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件复印件照片:">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                accept="image/*"
              >
                <img v-if="imageUrl" src="" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过10M
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="btnBox">
        <el-button type="primary" class="confirmBtn" @click="confirm"
          >验证</el-button
        >
        <el-button type="info" class="returnBtn" @click="closeShow"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      width="60%"
      title="合规性验证"
      :visible.sync="uploadVisible"
      append-to-body
    >
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
      >
        <el-button size="small" type="primary">点击选择文件</el-button>
      </el-upload>
      <div class="btnBox">
        <el-button type="primary" class="confirmBtn" @click="confirm"
          >开始上传</el-button
        >
        <el-button type="primary" class="returnBtn" @click="closeShow"
          >导入模板下载</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DicCustomerSelect from "@/components/customer/form/DicCustomerSelect";
import NoCompliantCust from "@/api/customer/NoCompliantCust";
import DicTable from "@/components/public/DicTable";
import { mapState } from "vuex";
export default {
  data() {
    return {
      labelPosition: "left",
      formData: {
        custCode: "",
        custName: "",
        custCodeType: "1",
        custNameType: "1",
        isCompliance: "",
        custManagerId: "",
        custManager: "",
      },
      ComplianceStatus: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "是",
          value: "1",
        },
        {
          label: "否",
          value: "2",
        },
      ],
      // 客户列表--客户经理表格数据
      custManagerTable: [],
      // 客户列表--客户经理弹窗表单
      custManagerForm: {
        STAFF_CODE: "",
        STAFF_NAME: "",
        ORG_NAME: "",
        telNumber: "",
      },
      // 客户列表--客户经理表格分页
      querycustManagerDialog: {
        pageIndex: 1, //当前页码
        pageSize: 5, //每页多少条
        rowCount: 0, //总条数
      },
      //合规用户列表
      tablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 0,
      },
      tableLoading: false,
      tableColumns: [
        { type: "checkbox", width: 60 },
        {
          field: "oldPartyCode",
          title: "客户编码",
          width: 200,
          showOverflow: true,
        },
        // {
        //   field: "custName",
        //   title: "客户名称",
        //   width: 200,
        //   showOverflow: true,
        // },
        { slotName: "custName", title: "客户名称", width: 250 },
        {
          field: "idType",
          title: "证件类型",
          width: 200,
          showOverflow: true,
        },
        {
          field: "idNum",
          title: "证件号码",
          width: 200,
          showOverflow: true,
        },
        {
          field: "custManager",
          title: "客户经理",
          showOverflow: true,
        },
        {
          field: "createDate",
          title: "创建时间",
          showOverflow: true,
        },
        {
          field: "statusCdName",
          title: "客户状态",
          showOverflow: true,
        },
        { slotName: "opt", title: "操作", width: 150 },
      ],
      tableData: [
       
      ],
      checkedVal: [], //选中数据的数组
      idCardType: [],
      outerVisible: false, //合规验证弹窗显隐
      uploadVisible: false, //上传，批量下载弹窗显隐
      chooseIdentCust: {
        custName: "张三",
        idType: "单位介绍信/公函+公章（仅用于党政军客户）",
        idNum: "785122112121",
        idAddress: "发动机使肌肤健康的健康",
      }, //点击当前行合规认证的数据
      imageUrl: "", //图片路径
    };
  },

  components: {
    DicCustomerSelect,
    DicTable,
  },

  computed: {
    ...mapState("user", ["user"]),
  },
  mounted() {
    this.getCustList();
  },

  methods: {
    //获取客户列表
    async getCustList() {
      let parmas = {
        pageIndex: this.tablePage.pageIndex,
        pageSize: this.tablePage.pageSize,
        custName: this.formData.custName,
        custNameLike: this.formData.custNameType,
        oldPartyCode: this.formData.custCode,
        oldPartyCodeLike: this.formData.custCodeType,
        custRealName: this.formData.isCompliance,
        custManagerId: this.formData.custManagerId,
        empeeId: "1",
        searchFlag: "2",
      };
      const response = await NoCompliantCust.getCustList(parmas);
      if (response.code == 200) {
        this.tableData = response.meta.customers;
        this.tablePage.rowCount = response.meta.pageInfo.rowCount;
        this.tableData.forEach((item) => {
          item.createDate=this.isNull(item.createDate).substring(0,4)+"-"+this.isNull(item.createDate).substring(4,6)+"-"+this.isNull(item.createDate).substring(6,8)
          if (item.custManagerNameB) {
            item.custManager =
              this.isNull(item.custManagerNameA) + "," + this.isNull(item.custManagerNameA);
          }else {
             item.custManager = this.isNull(item.custManagerNameA)
          }
        });
      }
    },
    // 客户经理初始化方法
    async custManagerAjax() {
      const response = await NoCompliantCust.getManagerList({
        STAFF_CODE: this.custManagerForm.STAFF_CODE,
        ORG_NAME: this.custManagerForm.ORG_NAME,
        STAFF_NAME: this.custManagerForm.STAFF_NAME,
        pageIndex: this.querycustManagerDialog.pageIndex, //请求多少页
        pageSize: this.querycustManagerDialog.pageSize, //每页多少条
        ORG_ID:this.user.orgId
      });
      if (response.code == 200) {
        this.custManagerTable = response.meta.customers;
        this.querycustManagerDialog.rowCount = response.meta.pageInfo.rowCount;
      }
    },
    //查询客户经理
    queryCustManagerId() {
      this.custManagerAjax();
    },
    //选中客户经理
    custManagerDialogRow(val) {
      this.$nextTick(() => {
        this.$refs.custManagerFormRef.resetFields();
      });

      this.formData.custManager = val.STAFF_NAME;
      (this.formData.custManagerId = val.STAFF_ID),
        (this.$refs.custManagerRef.drawer = false);
    },
    //客户经理列表换每页条数
    custManagerHandleSizeChange(val) {
      this.querycustManagerDialog.pageSize = val;
      this.custManagerAjax();
    },
    // 客户经理分页获取当前页
    custManagerHandleCurrentChange(val) {
      this.querycustManagerDialog.pageIndex = val;
      this.custManagerAjax();
    },
    // 客户经理点击事件
    custManagerHandel() {
      this.querycustManagerDialog.pageIndex = 1;
      this.querycustManagerDialog.pageSize = 5;
    },
    //查询合规用户
    checkInfo() {
      this.tablePage.pageIndex = 1
      this.getCustList()
    },
    //导出数据
    exportData() {
      this.$confirm(
        "确认导出未合规客户且不包含证件类型为：单位介绍信/公函+公章（仅用于党政军客户）上限为2000条?",
        "提示",
        {
          confirmButtonText: "确定",
          type: "warning",
          cancelButtonText: "取消",
          center: true,
        }
      )
        .then(async () => {
          //   const response = await CustomerInfoManageServer.delContInfo(params);
          //   if(response.code == 200){
          //       this.getContInfoList();
          //   }
        })
        .catch(() => {});
    },
    //列表换页
    handlePageChange(val) {
      
      this.tablePage.pageIndex = val.currentPage;
      this.tablePage.pageSize = val.pageSize;
      this.getCustList()
    },
    // 复选框选中的数据
    checkedData(val) {
      this.checkedVal = val;
    },
    //批量合规认证
    someComplianceIdent() {
      let flag = false
      if (this.checkedVal.length == 0) {
        this.$alert("请选择一个待合规客户!", "提示", { type: "warning" });
      } else {
        this.checkedVal.forEach(item => {
          if(item.identityType){
             flag = true
          }
        })
        if(flag == true){
          this.$alert("不能合规认证已合规的客户!", "提示", { type: "warning" });
        }else {
          //批量认证请求
        }
      }
    },
    //合规认证弹窗触发事件
    complianceIdent() {
      this.outerVisible = true;
    },
    //批量导入下载事件
    exportComplianceIdent() {
      this.uploadVisible = true;
    },
    //上传事件
    handleChange() {},
    someComplianceCheck() {
      this.$router.push({
        path: "/idenResultQuery",
        query: {
          // partyId: "2102",
          // staffId: "100078",
          // type: "customerAdd",
        },
      });
    },
    //合规认证弹窗验证按钮
    confirm() {
      
    },
    closeShow() {
      this.outerVisible = !this.outerVisible;
    },
    isNull(val) {
      if (
        val == "NaN" ||
        val == "null" ||
        val == "undefined" ||
        val == undefined
      ) {
        return (val = "");
      } else {
        return val;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.container {
  padding: 0.2rem;
  height: 100%;
  background-color: #fff;
}
.m-table-box {
  position: relative;
}
.u-row {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 10px;
}
.u-name {
  text-align: right;
  font-size: 14px;
  color: #333;
}
.u-value {
  font-size: 14px;
}
.upload-demo {
  text-align: center;
  margin-bottom: 10px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.upload-box {
  margin: 0 auto;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-icon-plus {
  border: 1px dashed #d9d9d9;
}
.el-upload__tip {
  color: red;
}
.select-box {
  width: 90px;
  padding: 0;
}
.btnBox {
  width: 100%;
  text-align: center;
}
.confirmBtn {
  width: 100px;
  color: #fff;
  margin: 10px 0;
}
.returnBtn {
  width: 100px;
  color: #fff;
  margin: 10px;
}
.exp {
  position: absolute;
  bottom: 12px;
  left: 10px;
  li {
    margin-right: 0.1rem;
  }
}
.sfz {
  display: inline-block;
  width: 0.15rem;
  height: 0.15rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 0.02rem;
  margin-right: 0.05rem;
  //  margin-top: 0.1rem;
  &.yhg {
    background-image: url("~@/assets/imgs/order/p_yihegui.png");
  }
  &.whg {
    background-image: url("~@/assets/imgs/order/p_weihegui.png");
  }
  &.dsh {
    background-image: url("~@/assets/imgs/order/p_daihegui.png");
  }
}
.flex {
  text-align: center;
  // display: inline-block;
}
.m-pagination {
  text-align: center;
  margin: 10px 30px 10px 0;
}
.clear {
  clear: both;
}
</style>